デザイナーが集まってタブバーを話し合ってみた
今回はタブバーについて対話しました。
これまでの共有会
- デザイナーが集まって命名ルールを話し合ってみた
- デザイナーが集まってインプットUIを話し合ってみた
- デザイナーが集まってモーダルUIを話し合ってみた
- デザイナーが集まってログイン画面について話し合ってみた
- デザイナーが集まってボタンについて話し合ってみた
- デザイナーが集まってキャンセルボタンを話し合ってみた
情報共有して認識を合わせることが目的のため、「クラスメソッドではこうしてます！」みたいなものではない点はご了承ください。
※iOSでは「タブバー」、Androidでは「ナビゲーションバー」の名称ですが、この記事ではどちらの場合も「タブバー」と表記します。
タブバーとは
アプリ内のさまざまな機能を切り替えるナビゲーションです。どこに何があるのか、アイコンとラベルで示しユーザーを案内します。
時計アプリの例：4つの機能（世界時計、アラーム、ストップウォッチ、タイマー）をタブで分け、その領域間を移動する
タブバーを設定する上で気を付けること
1. 最上位に位置するコンテンツをタブに表示する
タブバーの良い所は、アプリの全体像を把握できることです。階層構造で整理された情報の最上位に位置するコンテンツをタブに表示します。ユーザーはそのタブを通して、アプリの機能を理解します。
2. 機能の重複を避ける
「Home」というタブを例にあげます。「Home」は、アプリ全体の機能を一箇所にまとめ、機能の一覧表示として使われることがあります。異なるタブで同じ機能を存在させると、冗長性があり、混乱を招きます。どこに何の機能があるのか把握しづらいため、機能の重複は避けましょう。
「Home」タブに別タブで存在する機能が重複している例
3. ラベルは具体的な名詞にする
ラベルは、ユーザーが機能を見つけるための手がかりになります。やることベースの動詞表現ではなく、コンテンツの種類をなるべく具体的な名詞で表現し、そこに何があるか明確に表しましょう。
アクションが置いてあるタブバー
PayPayやYouTubeのタブバーの中央には、アクションが置いてあります。タップすると、モーダルが表示されPayPayは「支払い」、YouTubeは「作成」のアクションを促します。Material Designのガイドラインにある「フローティングアクションボタン (FAB)」と似ています。
「支払い」アイコンをタップすると「支払い」のモーダルが現れる
「＋（プラス）」アイコンをタップすると「作成」のハーフモーダルが現れる
ガイドラインを確認すると、Material Designでは「タブバーはアクションと組み合わすことができる」と記載しているのに対し、Human Interface Guidelinesでは「タブバーはナビゲーションを有効にするためだけに使用し、アクションを実行できるようにするためではない」と記載されています。
タブバーとアクションの組み合わせは、アプリの主要な機能に素早くアクセス出来るメリットもあれば、異なる機能（アクションとナビゲーション）が並列にあり混乱を生むデメリットもありそうですね。
ガイドラインをもとに、そのアプリの最適解となるタブバーを考えていきたいです。
他にもこんな話が出ました
ラベルのないタブバー
アイコンのみで、タブを説明しているタブバーをいくつか見たことがあります。アイコンの意味を補助する役目もあるラベルをなぜ省略するのでしょうか？私たちの見解をご紹介します。
- 多言語展開した時の文字数を懸念し、アイコンのみにした
- 言語によって単語の文字数が異なります。多言語展開した際、単語が長くなると、ラベル同士がぶつかり読みづらくなります。そこを懸念し、アイコンのみにしたと考えます。
- ターゲットにリテラシーが高い人が多く、ラベルは不要と判断した
- リテラシーが高い人の場合、アイコンのみでもそのタブが何を示しているか理解できると判断し、ラベルを省略したと考えます。
- 窮屈な印象を持たせたくなかった
- ラベルがあると、情報を十分に伝えられますが、タブの数が多いと少し窮屈な印象になります。ラベルをなくし、ゆとりを持たせたかった、十分な余白を確保したかったと考えます。
左はTwitter、右はInstagramのタブバー
タブを跨ぐような画面遷移が必要な場合は？
タブを跨ぐような画面遷移は推奨されていません。ただ、仕様上どうしても必要な場合はどうすればいいか？と議題が上がりました。そういった場合は「どこに遷移するか説明し位置関係をわかるようにする」や、デザイナーだけでは解決できない問題は「PdMやエンジニアに相談する」という意見が出ました。
現在の位置関係が分からなくなるような画面遷移は注意していきましょう。
活性状態のアイコンパターン
非活性状態のアイコンは、無彩色の線画が多い印象でした。活性状態のアイコンは色々なパターンがありましたのでご紹介します。
- 有彩色線画
- 無彩色塗りつぶし
- 有彩色（一色）塗りつぶし
- 有彩色（二色）塗りつぶし
- 有彩色塗りつぶし＋上線
- 有彩色下線
活性状態のアイコンパターン
他にも、面白い表現のアイコンやタブバーがありました。
- Amazon
- アイコンにアニメーションをつけています。カートに商品を追加するたびカートアイコンが動きます。
- 楽天ポイント
- 活性状態になるとオブジェクトが変わります。アイコンサイズも大きくなり、タブバーからはみ出て躍動感があります。
- Meditopia
- タブバーの背景色がタブごとに異なります。背景色に合わせてアイコンの色も変わります。
Material Designでは、「活性状態は塗りつぶしのアイコン、非活性状態は線画のアイコンを使用」と書かれています。活性と非活性の判別がしっかりできるようなアイコンを設定していきましょう。
さいごに
ユーザーはタブバーを通してアプリの機能を理解します。タブバーは、機能がどこに存在し何ができるのか説明し案内しなくてはいけません。ユーザーがアプリを理解できるよう、タブバーは慎重に設計していきましょう。
今回の内容が少しでもお役に立てれば幸いです。
